<template>
  <el-scrollbar
    ref="majorScroll"
    class="scrollbar-box"
    v-loading="jorLoading"
    v-if="!isJorDetail"
  >
    <div id="jorLibrary">
      <majorNav
        :majorsList="jobList"
        :majorType="majorType"
        @handleNavScorll="handleNavScorll"
        ref="majorNavRef"
      />
      <!-- 列表 -->
      <majorsListTable
        :majorsList="jobList"
        :majorType="majorType"
        @handleScroll="handleScroll"
        @handleListScroll="handleListScroll"
        @handleJorDetails="handleJorDetails"
        ref="majorsListTableRef"
      />
    </div>
  </el-scrollbar>

  <div v-if="isJorDetail">
    <!-- 职业库详情 -->
    <jor-library-det ref="jorDetailsRef" @goMajorlibrary="goMajorlibrary" />
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import bus from '@/utils/bus.js';

import majorNav from '../MajorNav';
import majorsListTable from '../../components/MajorsList';
import jorLibraryDet from '../../components/JorLibraryDet';
import { allCareer } from '@/api/appv2/appv1.js';
const emit = defineEmits(['goMajorlibrary']);
const goMajorlibrary = (data) => {
  emit('goMajorlibrary', data);
};
const isJorDetail = ref(false);
const majorsListTableRef = ref('');
const majorNavRef = ref('');
const majorType = ref('3');
const majorScroll = ref(null);
const jorLoading = ref(false);
const jorDetailsRef = ref(null);
const jobList = ref([]);
const handleJorDetails = (data, showType) => {
  isJorDetail.value = true;
  nextTick(() => {
    jorDetailsRef.value.handleInitMethod(data, showType);
  });
};
bus.on('handleOpenJorDet', (data) => {
  isJorDetail.value = true;
  nextTick(() => {
    jorDetailsRef.value.handleInitMethod(data, '1');
  });
});
const handleUpdateJorUi = () => {
  isJorDetail.value = false;
};
const fetchAllCareer = () => {
  jorLoading.value = true;
  allCareer({ deep: 3, studentId: localStorage.getItem('student_id') })
    .then((res) => {
      if (res.code == 20000) {
        jobList.value = res.data;
        jorLoading.value = false;
      } else {
        jorLoading.value = false;
      }
    })
    .catch(() => {
      jorLoading.value = false;
    });
};
const handleNavScorll = (index) => {
  majorsListTableRef.value.handleJorLisScroll(index);
};
const handleScroll = (scroll) => {
  majorScroll.value.scrollTo({ top: scroll - 140, behavior: 'smooth' });
};
const handleListScroll = (scroll) => {
  majorScroll.value.scrollTo({ top: scroll - 140, behavior: 'smooth' });
};
fetchAllCareer();
defineExpose({
  handleUpdateJorUi,
  handleJorDetails,
});
</script>

<style lang="scss" scoped>
.scrollbar-box {
  height: calc(100vh - 155px);
}
</style>
